import { useState, useEffect } from 'react';
import { Image } from "antd-mobile";
import { useHistory } from 'react-router-dom';

import './style.scss';

export default function(props) {
  const history = useHistory();
  // 防止头像闪烁, 如果没有src字段，1秒后再使用自制头像
  const [isTimeout, setIsTimout] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsTimout(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  // 链接到用户详情页面
  const toUserDetailPage = () => {
    if (!props.userId || props.preventLink) {
      return;
    }
    history.push(`/userInfo/${props.userId}`);
  }

  if (props.src || !isTimeout) {
    // 如果有src，使用src照片作为头像
    return <Image onClick={toUserDetailPage} {...props} />
  } else {
    // 否则使用根据用户信息创造一个默认头像，默认头像中展示的文字计算规则为nickName后两个文字，如果没有则为userId第一个字母
    const { nickName = '', userName = '', userId = '', groupName = '', defaultImageText, width = 42, height = 42, style: defaultStyle = {}, ...imageProps } = props;

    let imageText = '';

    if (defaultImageText) {
      imageText = defaultImageText;
    } else {
      imageText = (nickName || userName || '').toString().substr(-2, 2) || groupName.toString().substr(0, 1) || userId.toString().substr(0, 1).toUpperCase();
    }
    const style = { ...defaultStyle, width, height, lineHeight: `${height}px`, fontSize: imageText.length === 1 ? '30px' : '22px' };

    return <div className="defaultAvatarImage" {...imageProps} style={style} onClick={toUserDetailPage}>{imageText}</div>
  }
}